<template>
  <div>
    <div align="center">
      <label size="large" label-width="280px">— — — — — — — — — — </label><br/>
      <label size="large" label-width="280px">* * * 桥梁风险模型评估 * * *</label><br/>
      <label size="large" label-width="280px">— — — — — — — — — — </label>
    </div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="200px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="编号" prop="number">
            <el-input v-model="formData.number" placeholder="请输入编号,如：QL00001" clearable :style="{width: '60%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="桥下是否能通航" prop="qxsf">
            <el-select v-model="formData.qxsf" placeholder="请选择桥下是否能通航" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in qxsfOptions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="-所在道路类型" prop="szdl">
            <el-select v-model="formData.szdl" placeholder="请选择-所在道路类型" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in szdlOptions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="周边10公里范围物流园数量" prop="zbsg">
            <el-select v-model="formData.zbsg" placeholder="请选择周边10公里范围物流园数量" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in zbsgOptions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="运行年代" prop="yxnd">
            <el-select v-model="formData.yxnd" placeholder="请选择运行年代" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in yxndOptions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="检修周期" prop="jlzh">
            <el-select v-model="formData.jlzh" placeholder="请选择检修周期" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in jlzhOptions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="桥面车道数量" prop="qmcd">
            <el-select v-model="formData.qmcd" placeholder="请选择桥面车道数量" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in qmcdOptions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="桥梁所在道路类型" prop="qlsz">
            <el-select v-model="formData.qlsz" placeholder="请选择桥梁所在道路类型" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in qlszOptions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否安装在线监测系统" prop="sfaz">
            <el-select v-model="formData.sfaz" placeholder="请选择是否安装在线监测系统" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in sfazOptions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="当前监测是否报警" prop="dqjc">
            <el-select v-model="formData.dqjc" placeholder="请选择当前监测是否报警" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in dqjcOptions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="报警处置情况" prop="bjcz">
            <el-select v-model="formData.bjcz" placeholder="请选择报警处置情况" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in bjczOptions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="气象预警信息" prop="qxyj">
            <el-select v-model="formData.qxyj" placeholder="请选择气象预警信息" clearable :style="{width: '60%'}">
              <el-option v-for="(item, index) in qxyjOptions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="评估结果"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <span>编号:{{number}}；得分：{{score}}；风险等级：{{name}}</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
  import {handleQL} from "../../../api/edu/risk";

  export default {
    components: {},
    props: [],
    data() {
      return {
        centerDialogVisible : false,
        formData: {
          number: undefined,
          qxsf: undefined,
          szdl: undefined,
          zbsg: undefined,
          yxnd: undefined,
          jlzh: undefined,
          qmcd: undefined,
          qlsz: undefined,
          sfaz: undefined,
          dqjc: undefined,
          bjcz: undefined,
          qxyj: undefined,
        },
        rules: {
          number: [{
            required: true,
            message: '请输入编号',
            trigger: 'blur'
          }],
          qxsf: [],
          szdl: [],
          zbsg: [],
          yxnd: [],
          jlzh: [],
          qmcd: [],
          qlsz: [],
          sfaz: [],
          dqjc: [],
          bjcz: [],
          qxyj: [],
        },
        qxsfOptions: [{
          "label": "是",
          "value": 1
        }, {
          "label": "否",
          "value": 2
        }],
        szdlOptions: [{
          "label": "过境公路",
          "value": 1
        }, {
          "label": "主要交通干道",
          "value": 2
        }, {
          "label": "次要交通干道",
          "value": 3
        }, {
          "label": "生活干道",
          "value": 4
        }],
        zbsgOptions: [{
          "label": "0个",
          "value": 1
        }, {
          "label": "1~2个",
          "value": 2
        }, {
          "label": "3个及以上",
          "value": 3
        }],
        yxndOptions: [{
          "label": "≤5年",
          "value": 1
        }, {
          "label": "大于5年，小于等于30年",
          "value": 2
        }, {
          "label": "大于30年",
          "value": 3
        }],
        jlzhOptions: [{
          "label": "≤0.5年",
          "value": 1
        }, {
          "label": "大于0.5年，小于等于1年",
          "value": 2
        }, {
          "label": "大于1年",
          "value": 3
        }],
        qmcdOptions: [{
          "label": "双向≤4车道",
          "value": 1
        }, {
          "label": "双向≤8车道",
          "value": 2
        }],
        qlszOptions: [{
          "label": "过境公路",
          "value": 1
        }, {
          "label": "主要交通干道",
          "value": 2
        }, {
          "label": "次要交通干道",
          "value": 3
        }, {
          "label": "生活干道",
          "value": 4
        }],
        sfazOptions: [{
          "label": "否",
          "value": 1
        }, {
          "label": "是",
          "value": 2
        }],
        dqjcOptions: [{
          "label": "否",
          "value": 1
        }, {
          "label": "是",
          "value": 2
        }],
        bjczOptions: [{
          "label": "正在处置",
          "value": 1
        }, {
          "label": "未处置",
          "value": 2
        }],
        qxyjOptions: [{
          "label": "结冰预警",
          "value": 1
        }, {
          "label": "暴雪预警",
          "value": 2
        }],
      }
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
      submitForm() {
        handleQL(this.formData).then(response => {
          console.log(response)
          this.number = response.number;
          this.score = response.score,
            this.name = response.name,
            this.centerDialogVisible = true
        });
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
    }
  }

</script>
<style>
</style>
